<template>
<!-- 把该标签里面所有内容，在页面上渲染到 .app-header这个标签里 -->
<Teleport to=".sdy-header">
    <van-nav-bar :title="title"  :left-arrow="back">
        <template #left>
          <slot name="left">
          </slot>
        </template>
        <template #title>
          <slot name="title">{{title}}</slot>
        </template>
        <template #right>
          <slot name="right"></slot>
        </template>
    </van-nav-bar>
</Teleport>
</template>
<script setup lang="ts">
// 对顶部插槽进行二次封装
import { defineProps } from 'vue';
interface MyTopBar { 
    title: string,
    back?:boolean
}
// 接受父组件传递的数据
defineProps<MyTopBar>()
</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';
// 样式穿透
:deep(.van-nav-bar__content){
    background-color: $globalColor;
}</style>